<template>
  <div class="log-base-input-wrapper">
    <input
      type="text"
      :placeholder="placeholder"
      ref="input"
      :value="value"
      @change.stop="submitChange($event)"
      @input="emitChange($event)"
    />
  </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue'

const props = defineProps<{
  placeholder: string
  value: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: string): void
  (e: 'change', value: InputEvent): void
}>()

let input: Ref<HTMLInputElement | null> = ref(null)
function focus() {
  let dom = input.value as HTMLInputElement
  dom.focus()
}

function submitChange(e: Event) {
  emit('change', e as InputEvent)
}

function emitChange(e: Event) {
  emit('update:value', ((e as InputEvent).target as any).value)
}
</script>

<style lang="scss" scoped>
@import 'style/config';
$w: $baseInputWidth;
$h: $baseInputHeight;
$fs: $baseInputFontsize;
$atom: calc($fs / 15);

.log-base-input-wrapper {
  box-sizing: border-box;
  background-color: white;
  width: $w;
  height: $h;
  font-size: $fs;

  border-radius: calc($fs / 5);
  border-bottom: $atom solid #ddd;
  transition: 0.1s;

  &:focus-within {
    box-shadow: calc($atom * 2) calc($atom * 2) calc($atom * 3) #ccc;
  }

  input {
    box-sizing: border-box;
    width: $w;
    height: $h;
    padding: 0 calc($fs / 2);
    line-height: $h;
    background-color: transparent;
    font-size: $fs;
  }
}
</style>
